import React from "react";
import { Row, Col, Button, Form, Input, InputNumber, Radio, notification } from 'antd';
import { connect } from 'dva';
import { FormComponentProps } from "antd/lib/form/Form";
import { DropDownSelect } from '@/components/DropDownSelect';
import Entrance from './formEntrance';
import ImgViewer from '@/components/ImgViewer';
import elec from '@/assets/images/archives/elec.png';
import elecSel from '@/assets/images/archives/elecSel.png';
import paper from '@/assets/images/archives/paper.png';
import paperSel from '@/assets/images/archives/paperSel.png';
import { checkInit } from '@/utils/util';

interface IProps extends FormComponentProps {
  dispatch?: Function;
  children?: React.ReactNode;
  loading?: boolean;
  dict?: any;
  onClick?: Function;
  data: {
    url: string;
    position: string;
    sprayPumpQuantity: number;
    sprayPumpFlow: number;
    sprayPumpLift: number;
    systemForm: number;
    systemStatus: number;
    dutyDepartment: string;
    dutyName: string;
    maintenanceOwnerName: string;
  }
}


@connect(({ archives_devices, loading }) => ({
  dict: archives_devices.dict || {},
}))
class Foam extends React.PureComponent<IProps, any> {
  state = {

  }

  componentDidMount() {
    checkInit();
    this.queryData();
  }
  queryData() {
    const { form, data } = this.props;

    if (data) {
      const {
        url,
        ...items
      } = data;
      const ans = {
        ...items
      }
      this.setState({
        url,
      }, () => form.setFieldsValue(ans))

    }
  }
  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'archives_devices/modifyDevice',
          payload: {
            foamSystemItem: [values],
          }
        })
      } else {
        notification['error']({
          message: `保存失败`,
          description: '字段验证不通过',
        });
      }
    })
  }

  render() {
    const { form, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const longInputLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    return (
      <Form style={{ marginTop: '30px' }} onSubmit={this.handleSubmit}>
        <Button type="primary"
          style={{ position: 'absolute', right: '5px', top: '45px' }}
          onClick={() => this.props.onClick()}
        >切换到纸质台账</Button>
        <Row>
          <Col key={1} span={14}>
            <Form.Item
              label="设置部位"
              {...longInputLayout}
            >
              {getFieldDecorator('position')(
                <Input placeholder="请输入设备部位" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={6} />
        </Row>
        <Row>
          <Col key={1} span={7}>
            <Form.Item
              label="喷淋泵数量"
              {...formItemLayout}
            >
              {getFieldDecorator('sprayPumpQuantity')(
                <Input type="number" placeholder="请输入" addonAfter="个" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={7} >
            <Form.Item
              label="流量"
              {...formItemLayout}
            >
              {getFieldDecorator('sprayPumpFlow')(
                <Input type='number' placeholder="请输入" addonAfter="L/S" />
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={7} >
            <Form.Item
              label="扬程"
              {...formItemLayout}
            >
              {getFieldDecorator('sprayPumpLift')(
                <Input type='number' placeholder="请输入" addonAfter="m" />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col key={1} span={7}>
            <Form.Item
              label="系统形式"
              {...formItemLayout}
            >
              {getFieldDecorator('systemForm')(
                DropDownSelect(dict, 'auto.outfire.system.form')
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={7}>
            <Form.Item
              label="系统状态"
              {...formItemLayout}
            >
              {getFieldDecorator('systemStatus')(
                DropDownSelect(dict, 'fire.indoor.system.status')
              )}
            </Form.Item>
          </Col>
          <Col key={4} span={10} />
        </Row>
        <Row>
          <Col key={2} span={7}>
            <Form.Item
              label="责任部门"
              {...formItemLayout}
            >
              {getFieldDecorator('dutyDepartment')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={7}>
            <Form.Item
              label="责任人"
              {...formItemLayout}
            >
              {getFieldDecorator('dutyName')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={4} span={10} />
        </Row>
        <Row>
          <Col key={1} span={14}>
            <Form.Item
              label="维修保养单位"
              {...longInputLayout}
            >
              {getFieldDecorator('maintenanceOwnerName')(
                <Input placeholder="请输入单位" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={6} />
        </Row>
        <Button style={{ marginLeft: '5%', marginTop: '10%' }} type="primary" htmlType="submit">保存</Button>
      </Form>
    )
  }
}
const Foams = Form.create<IProps>()(Foam);
export default Foams;